<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    html, body,  #root {
      height: 100%;
    }
    #root {
      display: flex;
      padding-right: 20px;

    }
    #left {
      width: 110px;
      background-color: #fefefe;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #middle {
      flex: 1;
      margin-top: 40px;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 40px;
      padding-right: 20px;
    }
    #part1 {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding-bottom: 30px;
      display: flex;
      justify-content: space-between;
    }

    #right {
      flex: 1;
    }
    #space {
      width: 16px;
    }
    .icon_wrapper {
      display: flex;
      width: 80px;
      height: 80px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      transition: .3s;
    }
    .icon_wrapper:hover {
      background-color: #efefef;
    }

    .icon_wrapper div {
      margin-top: 10px;
    }
    .part1_left {
      display: flex;
      align-items: center;
      font-size: 12px;
    }
    .part1_left .icon {
      width: 12px;
      height: 12px;
      background-color: #888888;
      margin-right: 10px;
    }
    .part1_right {
      display: flex;
    }
    .arrow {
      width: 46px;
      height: 46px;
      border-radius: 4px;
      margin-left: 12px;
      background-image: linear-gradient(90deg, oklch(0.6332 0.24 31.68) 0%, oklch(0.6902 0.277 332.77) 50%, oklch(0.5318 0.28 296.97) 100%);
      position: relative;
    }
    .arrow:after {
      display: block;
      content: '';
      width: 44px;
      height: 44px;
      background-color: #FFF;
      border-radius: 4px;
      position: absolute;
      left: 1px;
      top: 1px;
      z-index: 0;
    }
    .arrow .xx {
      width: 16px;
      height: 16px;
      background-color: #5c5c5c;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<div id="root">
  <div id="left">
    <div class="icon_wrapper">
      <svg _ngcontent-ng-c336204041="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32" class="angular-logo"><g _ngcontent-ng-c336204041="" clip-path="url(#a)"><path _ngcontent-ng-c336204041="" fill="url(#b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"></path><path _ngcontent-ng-c336204041="" fill="url(#c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"></path></g><defs _ngcontent-ng-c336204041=""><linearGradient _ngcontent-ng-c336204041="" id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse"><stop _ngcontent-ng-c336204041="" stop-color="#E40035"></stop><stop _ngcontent-ng-c336204041="" offset=".24" stop-color="#F60A48"></stop><stop _ngcontent-ng-c336204041="" offset=".352" stop-color="#F20755"></stop><stop _ngcontent-ng-c336204041="" offset=".494" stop-color="#DC087D"></stop><stop _ngcontent-ng-c336204041="" offset=".745" stop-color="#9717E7"></stop><stop _ngcontent-ng-c336204041="" offset="1" stop-color="#6C00F5"></stop></linearGradient><linearGradient _ngcontent-ng-c336204041="" id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse"><stop _ngcontent-ng-c336204041="" stop-color="#FF31D9"></stop><stop _ngcontent-ng-c336204041="" offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop></linearGradient><clipPath _ngcontent-ng-c336204041="" id="a"><path _ngcontent-ng-c336204041="" fill="#fff" d="M0 0h223v236H0z"></path></clipPath></defs></svg>
    </div>
    <div class="icon_wrapper">
      <svg _ngcontent-ng-c336204041="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="18" fill="inherit"><path _ngcontent-ng-c336204041="" d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"></path></svg>
      <div>document</div>
    </div>
    <div class="icon_wrapper">
      <svg _ngcontent-ng-c336204041="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="10" fill="inherit"><path _ngcontent-ng-c336204041="" d="m5.668 10-5-5 5-5 1.187 1.188L3.022 5.02l3.813 3.812L5.668 10Zm6.667 0-1.188-1.188L14.98 4.98l-3.812-3.812L12.335 0l5 5-5 5Z"></path></svg>
      <div>Tutorials</div>
    </div>
    <div class="icon_wrapper">
      <svg _ngcontent-ng-c336204041="" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path _ngcontent-ng-c336204041="" d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.46Z"></path></svg>
      <div>Playground</div>
    </div>
    <div class="icon_wrapper">
      <svg _ngcontent-ng-c336204041="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="18" fill="inherit"><path _ngcontent-ng-c336204041="" d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"></path></svg>
      <div>Reference</div>
    </div>
  </div>


  <div id="middle">
    <div id="part1">
      <div class="part1_left">
        <div class="icon"></div>
        <div>
          <div style="color: #a0a1a7">Learn angualr</div>
          <div>Learn angualr xxx</div>
        </div>
      </div>
      <div class="part1_right">
        <div class="arrow">
          <div class="xx"></div>
        </div>
        <div class="arrow">
          <div class="xx"></div>
        </div>
      </div>
    </div>
    <div id="part2">part</div>
    <div id="part3">part</div>
  </div>
  <div id="space"></div>
  <div id="right">3</div>
</div>
</body>
<script>


</script>
</html>
